<template>
  <el-button @click="open">打开一个div</el-button>

  <button ref="buttonRef" @click="add">{{ count }}</button>

  <div v-if="show" ref="domRef">显示 nextTick</div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      count: 0,
    };
  },

  methods: {
    // open() {
    //   this.show = true;
    //   // show 修改为 true 之后，div 虽然可以看到，但是需要一定的时间，在这里立刻执行下面的代码还是拿不到真实的DOM对象
    //   console.log(this.$refs.domRef.innerHTML);
    // },

    // open() {
    //   this.show = true;
    //   // 延迟一会再去获取DOM对象
    //   setTimeout(() => {
    //     console.log(this.$refs.domRef.innerHTML);
    //   }, 0);
    // },

    open() {
      this.show = true;

      this.$nextTick(() => {
        // 等待这一次数据更新完成且真实DOM渲染完成（updated）之后，帮我们调用这个回调函数
        console.log(this.$refs.domRef.innerHTML);
      });
    },

    add() {
      this.count++;
      this.$nextTick(() => {
        console.log(this.$refs.buttonRef.innerHTML);
      });
    },
  },
};
</script>
